<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="../static/js/echarts.min.js"></script>
    <title>Title</title>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div align="center" id="main" style="width: 1200px;height:550px;"></div>

    <div align="center"  style="transform: scale(2);">
      <table>
        <thead>
          <tr>
            <th>兴衰指数</th>
            <th>繁荣与没落</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td style="text-align: center;">{{ s[-1][0] }}</td>
            <td style="text-align: center;">{{ s[-1][1] }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById('main'));
      let dataAxis = [];
      let dataA = [];

      // 从数据库导入数据
      var aGroup = [
        {% for row in s[:12] %}
          // 将前12行的两列数据添加到a组
          ['{{ row[0] }}', '{{ row[1] }}'],
        {% endfor %}
      ];

      var bGroup = [
        ['繁荣与没落', '{{ s[-1][0] }}'],
        ['兴衰指数', '{{ s[-1][1] }}']
      ];

      // 将a组数据添加到dataAxis和dataA中
      for (var i = 0; i < aGroup.length; i++) {
        dataAxis.push(aGroup[i][0]);
        dataA.push(aGroup[i][1]);
      }

      var option = {
        title: {
          text: '诗句中情绪词出现概率',
          left: 'center',
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            inside: true,
            color: '#000'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          z: 10
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#999'
          }
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [
          {
            type: 'bar',
            showBackground: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ])
              }
            },
            data: dataA
          }
        ]
      };

      myChart.setOption(option);
    </script>
  </body>
</html>